<!doctype html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>论坛</title>
  <link rel="Shortcut Icon" type="image/x-icon" href="css/favicon.ico">
  <link rel="apple-touch-icon-precomposed" href="css/clip_icon.png">
  <link rel="stylesheet" type="text/css" href="css/layout.css">
  <link rel="stylesheet" type="text/css" href="css/general.css">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <link href="css/css" rel="stylesheet">
  <link rel="stylesheet" href="./elementui/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/elment.js"></script>
  <script src="./d3.v7.min.js"></script>
  <style>
    .tooltip {
      position: absolute;
      background-color: white;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 5px;
      font-size: 14px;
      pointer-events: none;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .comments {
      width: 60vw;
      margin: 20px auto;
    }

    .add {
      height: 140px;
    }

    .split {
      width: 100%;
      height: 1px;
      background: #9c9c9c;
      margin: 10px 0;
    }

    .username {
      position: absolute;
      z-index: 1001;
      right: 30px;
      top: 50px;
      font-weight: bold;
      font-size: 16px;
      cursor: pointer;
    }

    .link {
      color: #72746e;
      cursor: pointer;
    }

    .row {
      margin-bottom: 10px;
      position: relative;
    }

    .flex-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sons {
      padding-left: 30px;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div id="container">
      <el-dropdown class="username" v-if="userInfo.username" trigger="click" @command="dropdown">
        <div class="account">
          <span>{{ userInfo.username }}</span>
        </div>
        <el-dropdown-menu slot="dropdown" class="header-dropdown">
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <div v-if="!userInfo.username" class="username" style="font-size: 14px;" @click="login">
        登录
      </div>
      <header id="gHeader">
        <div class="logo">
          <a href="index.html"><img src="images/logo.png" alt="书法历史长河"></a>
        </div>
      </header>
      <section id="main" style="margin-top: 40px;">
        <div class="mainBox">
          <ul class="txtList target">
            <li class="off"><a href="4.html">书法家</a>|</li>
            <li class="off"><a href="3.html">作品内容</a>|</li>
            <li class="off"><a href="5.html">趣味知识</a>|</li>
            <li class="off"><a href="6.html">可视化表</a>|</li>
            <li class="on"><a href="javascript:void(0);">论坛</a></li>
          </ul>

          <div class="comments">
            <div class="add">
              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" placeholder="请输入内容" v-model="comment">
              </el-input>
              <el-button @click="addComment" size="small" style="float: right;margin-top: 10px;" type="primary">发表
              </el-button>

            </div>
            <div class="split"></div>
            <div v-for="item in commentList" class="row">
              <div style="margin-bottom: 5px;">
                <span style="font-weight: bold;color: #000;">{{ item.userName }}</span>
                :
                <span style="color: #333;">{{ item.content }}</span>
              </div>
              <div class="flex-between">
                <div>{{ item.time }}</div>
                <div class="link" @click="answer(item)">回复</div>
              </div>

              <div class="sons">
                <div v-for="child in item.children" style="margin-bottom: 20px;">
                  <div style="margin-bottom: 5px;">
                    <span style="font-weight: bold;color: #000;">{{ child.userName }}</span>
                    :
                    <span style="color: #333;">{{ child.content }}</span>
                  </div>
                  <div>{{ child.time }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    <el-dialog title="登录" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div v-if="mode === 'login'">
        <el-form ref="loginForm" label-width="100px" label-position="top" :model="loginForm" :rules="rules">
          <el-form-item label="用户名" prop="username" class="user">
            <el-input v-model="loginForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="pass">
            <el-input id="password" type="password" v-model="loginForm.password" auto-complete="off" placeholder="请输入密码"
              @keyup.enter.native="handleEnterClick"></el-input>
          </el-form-item>
          <el-form-item>
            <div style="
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                  ">
              <el-button id="enterBtn" type="primary" style="width: 100%" @click="submit('loginForm')">登录</el-button>
            </div>
            <div class="bottom">
              没有用户名去<span class="link" @click="mode = 'register'">注册</span>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="mainForm" v-if="mode === 'register'">
        <el-form ref="registerForm" label-width="80px" label-position="left" :model="registerForm" :rules="rules">
          <el-form-item label="用户名" prop="username" class="user">
            <el-input size="mini" v-model="registerForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" class="pass">
            <el-input id="password" size="mini" type="password" v-model="registerForm.password" auto-complete="off"
              placeholder="请输入密码"></el-input>
          </el-form-item>
        </el-form>
        <div style="display: flex; justify-content: space-between; width: 100%">
          <el-button id="enterBtn" type="primary" style="width: 100%" @click="register('registerForm')">注册</el-button>
        </div>
        <div class="bottom" style="margin-top: 10px;">
          已有用户名，返回<span class="link" @click="mode = 'login'">登录</span>
        </div>
      </div>
    </el-dialog>

    <el-dialog title="回复" :visible.sync="dialogVisibleAnswer" width="30%" :before-close="handleClose2">
      <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 4}" placeholder="请输入内容" v-model="comment2">
      </el-input>
      <div style="display: flex;justify-content: flex-end;">
        <el-button @click="addComment" size="small" style="margin-top: 10px;" type="primary">发表
        </el-button>
      </div>
    </el-dialog>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data() {
        return {
          comment: '',
          comment2: '',
          dialogVisible: false,
          dialogVisibleAnswer: false,
          mode: 'login',
          userInfo: {},
          loginForm: {
            username: "",
            password: "",
          },
          registerForm: {
            username: "",
            password: "",
          },
          rules: {
            username: [{
              required: true,
              message: "用户名不能为空",
              trigger: "blur"
            }, ],
            password: [{
              required: true,
              message: "密码不能为空",
              trigger: "blur"
            }, ],
          },
          commentList: [],
          isMaster: '',
        }
      },
      mounted() {
        this.getComments()
        this.userInfo = localStorage.getItem('sfWebUserInfo') ? JSON.parse(localStorage.getItem('sfWebUserInfo')) :
        {}
      },
      methods: {
        handleClose() {
          this.dialogVisible = false;
        },
        handleClose2() {
          this.dialogVisibleAnswer = false;
          this.currentAnswer = null
        },
        addComment() {
          if (!localStorage.getItem('sfWebUserInfo')) {
            this.$message.error('请先登录')
            setTimeout(() => {
              this.mode = 'login'
              this.dialogVisible = true;
            }, 1000)
            return
          }
          let params = {
            content: this.comment,
            userName: this.userInfo.username,
            commentMasterId: '',
            time: `${new Date().getFullYear()}-${new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1}-${new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()} ${new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours()}:${new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()}:${new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()}`
          }
          if (this.currentAnswer) {
            params.commentMasterId = this.currentAnswer.id
            params.content = this.comment2;
            if (!this.comment2) {
              this.$message.error('请输入评论')
              return
            }
          } else {
            if (!this.comment) {
              this.$message.error('请输入评论')
              return
            }
          }
          fetch('/comment', {
            method: "POST",
            body: JSON.stringify(params),
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json"
            },
          }).then((response) => {
            return response.json().then((res) => {
              console.log(res)
              if (res.code === 200) {
                this.$message.success('发表成功')
                this.getComments()
                this.comment = ''
                this.comment2 = ''
                this.isMaster = ''
                this.dialogVisibleAnswer = false;
              }
            })
          })
        },
        getComments() {
          fetch('/comment/get', {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              "Accept": "application/json"
            },
          }).then((response) => {
            return response.json().then((res) => {
              console.log(res)
              let comments = res.data;
              // 处理评论
              let master = comments.filter(v => !v.commentMasterId)
              master = master.map(v => {
                return {
                  ...v,
                  children: []
                }
              })
              master = master.sort((a, b) => {
                return new Date(b.time).getTime() - new Date(a.time).getTime()
              })
              let son = comments.filter(v => v.commentMasterId)
              for (let m of master) {
                let ms = son.filter(v => v.commentMasterId == m.id)
                ms = ms.sort((a, b) => {
                  return new Date(b.time).getTime() - new Date(a.time).getTime()
                })
                m.children = ms
              }
              console.log(master)
              this.commentList = master
            })
          })
        },
        answer(row) {
          this.currentAnswer = row;
          this.dialogVisibleAnswer = true;
        },
        submit(formName) {
          this.$refs[formName].validate((valid) => {
            console.log(valid);
            if (valid) {
              let params = {
                username: this.loginForm.username,
                password: this.loginForm.password,
              };

              fetch('/user/login', {
                method: "POST",
                body: JSON.stringify(params),
                headers: {
                  "Content-Type": "application/json",
                  "Accept": "application/json"
                },
              }).then((response) => {
                return response.json().then((res) => {
                  console.log(res)
                  if (res.code === 200) {
                    localStorage.setItem('sfWebUserInfo', JSON.stringify(res.data))
                    window.location.reload()
                  } else {
                    this.$message.error(res.msg)
                  }
                })
              })
            }
          });
        },
        dropdown(command) {
          if (command === 'logout') {
            this.$confirm('确定退出吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }).then(() => {
              localStorage.removeItem('sfWebUserInfo')
              window.location.reload()
            });
          }
        },
        login() {
          this.mode = 'login'
          this.dialogVisible = true;
        },
        register(ref) {
          this.$refs[ref].validate((valid) => {
            console.log(valid);
            if (valid) {
              let params = this.registerForm;
              fetch('/user/register', {
                method: "POST",
                body: JSON.stringify(params),
                headers: {
                  "Content-Type": "application/json",
                  "Accept": "application/json"
                },
              }).then((response) => {
                return response.json().then((res) => {
                  console.log(res)
                  if (res.code === 200) {
                    this.$message.success('注册成功，即将为你自动登录')
                    localStorage.setItem('sfWebUserInfo', JSON.stringify(res.data))
                    setTimeout(() => {
                      window.location.reload()
                    }, 2000)
                  } else {
                    this.$message.error(res.msg)
                  }
                })
              })
            }
          });
        },
      }
    })
  </script>
  <script src="js/jquery.min.js"></script>
  <script src="js/iscroll.min.js"></script>
  <script src="js/ofi.min.js"></script>
  <script src="js/echo.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/jquery.lazyload.min.js"></script>
  <script src="js/jquery.matchHeight-min.js"></script>
  <script src="js/placeholder.js"></script>
  <script src="js/artists.js"></script>
  <!--异步加载部分-->
  <script async src="js/js"></script>
</body>

</html>